<!doctype html>

<meta charset="utf-8">
<title>Dagre D3 Demo: Sentence Tokenization</title>
<link rel="stylesheet" href="../../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
    <link rel="stylesheet" href="../../../css/reset.css" />
    <link rel="stylesheet" href="../../../css/index.css" />
    <link rel="stylesheet" href="../../../font/iconfont.css" />
    <link rel="shortcut icon" href="../../../favicon.ico" />
    <script src="../../../js/jquery-3.3.1.min.js"></script>
    <script src="../../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
<script src="../../../js/d3.v4.min.js" charset="utf-8"></script>
<script src="../../../js/dagre-d3.js"></script>

<style id="css">
    /* This sets the color for "TK" nodes to a light blue green. */
    g.type-TK > rect {
        fill: #00ffd0;
    }

    text {
        font-weight: 300;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
        font-size: 14px;
    }

    .node rect {
        stroke: #999;
        fill: #fff;
        stroke-width: 1.5px;
    }

    .edgePath path {
        stroke: #333;
        stroke-width: 1.5px;
    }
</style>
<br>
<input type="hidden" id="id" name="id" th:value="${id}" >
<a href='javascript:;'  id="add-disc" class="layui-btn layui-btn-radius layui-btn-normal f-left">新增节点</a>
<svg id="svg-canvas" width=960 height=600></svg>

<script >

  // Create the input graph
  var g = new dagreD3.graphlib.Graph()
    .setGraph({})
    .setDefaultEdgeLabel(function() { return {}; });

  // Here we"re setting nodeclass, which is used by our custom drawNodes function
  // below.
  g.setNode(0,  { label: "开始",       class: "type-no" });
  g.setNode(1,  { label: "用印申请",         class: "type-S" });
  g.setNode(2,  { label: "主管领导",        class: "type-NP" });
  g.setNode(3,  { label: "公司主要领导",        class: "type-DT" });
  g.setNode(4,  { label: "审核",      class: "type-TK" });
  g.setNode(5,  { label: "结束",        class: "type-VP" });
  g.nodes().forEach(function(v) {
    var node = g.node(v);
    // Round the corners of the nodes
    node.rx = node.ry = 5;
  });

  // Set up edges, no special attributes.
  g.setEdge(0, 1);
  g.setEdge(1, 2);
  g.setEdge(2, 3);
  g.setEdge(2, 1);
  g.setEdge(3, 4);
  g.setEdge(3, 1);
  g.setEdge(4, 5);
  g.setEdge(4, 1);
  // Create the renderer
  var render = new dagreD3.render();

  // Set up an SVG group so that we can translate the final graph.
  var svg = d3.select("svg"),
    svgGroup = svg.append("g");

  // Run the renderer. This is what draws the final graph.
  render(d3.select("svg g"), g);

  // Center the graph
  var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
  svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
  svg.attr("height", g.graph().height + 40);
  $(function() {	
	  var id=$("#id").val();
	  layui.use([ 'element', 'table', 'layer' ], function() {
			var element = layui.element;
		});
		//弹出框
		$("#add-disc").on("click",function() {
			layer.open({
				title : [ '通知节点信息','font-size:18px;text-align:center;padding:0' ],
				type : 2,
				area : [ '600px', '500px' ],
				shade : [ 0.8, '#393D49' ],
				content : "modProcessnode_add.html"
			});
		})
	})
</script>